<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bankBg {
  background: #39ccac;
}
.bankBg2 {
  background: #ff3a5b;
}
.bankBg3 {
  background: #4989ff;
}
</style>
<template>
  <div class="h100 p15 bankBg f f-col">
    <div class="h100">
      <div v-if="datas" class="bg-white round p20 mt15 bg-white" @click="$link('./bankcardview')">
        <h2 class="f18">{{datas.bankName}}</h2>
        <p class="mt10">{{datas.cardNo}}</p>
      </div>
    </div>
    <p
      class="center cfff p-tb-10"
      @click="$dialog.confirm({title: '确定要解绑银行卡？',message: '解除绑定后需要重新绑定银行卡才能进行提现操作！',}).then(() => {show.verification = true}).catch(() => {});"
    >解除绑定</p>


    <pwd
      v-if="show.verification"
      :type="2"
      @validationPwd="validationPwd"
      @validationClose="validationClose"
    ></pwd>

    
  </div>
</template>

<script>
import pwd from "../components/password";
import { bankcardList, unBinding } from "@/http/api";
export default {
  data() {
    return {
      show: {
        verification: false
      },
      datas: null
    };
  },
  components: {
    pwd
  },
  created() {
    bankcardList().then(res => {
      console.log(res);
      if (res.code === 200) {
        this.datas = res.result;
      }
    });
  },
  methods: {
    validationPwd(val) {
      unBinding().then(res => {
        if (res.code === 200) {
          this.$router.go(-3);
          this.Toast.success({
            iconUrl: "../../../static/img/logo.png",
            position: "topCenter",
            message: "您的银行卡已解绑"
          });
        }
      });
    },
    validationClose(value) {
      this.show.verification = false;
    },
    funcUnBinding() {
      unBinding().then(res => {
        console.log(res);
      });
    }
  }
};
</script>